// 设置body样式
body {
  margin: 0 auto;
  // 需要设置最大最小宽度
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #f2f2f2;
}

// 屏幕被分成了10份 所以要将 超出设计稿的宽度部分
// 强制设置html字体大小设置为设计稿的宽度
@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}
// top
.top {
  // 背景颜色
  background-color: #ffdb47;
  // 高度
  height: 1.173333rem;
  display: flex;
  .classfiy,
  .login {
    // 宽高固定  圣杯布局
    height: 1.173333rem;
    width: 1.333333rem;
    img {
      // 图片转换为块元素可以避免错乱
      display: block;
      margin: 0.16rem auto;
      // 图片的宽高要给死
      width: 0.48rem;
      height: 0.8rem;
    }
  }
  .top_ad {
    flex: 1;
    img {
      display: block;
      height: 0.666667rem;
      margin: 0.16rem auto 0;
    }
  }
}

// search
.search {
  height: 1.173333rem;
  background-color: #ffdb47;
  // 把sou盒子往里面和下面挤
  padding: 0.16rem 0.306667rem 0;
  position: relative;
  .sou {
    height: 0.853333rem;
    line-height: 0.853333rem;
    width: 100%;
    border-radius: 0.426667rem;
    // 把文字往右边挤 留放图标的位置
    padding-left: 0.906667rem;
    color: #666;
    background-color: #fff;
    p {
      font-size: 0.32rem;
      // 把文字挤下来
      // padding-top: 0.16rem;
    }
  }
  &::before {
    content: "";
    display: block;
    position: absolute;
    // 背景图片不要忘记给大小
    width: 0.48rem;
    height: 0.48rem;
    background: url(./../img/04.png) no-repeat;
    // 不要忘记限制背景图片的大小
    background-size: 0.48rem 0.48rem;
    left: 0.626667rem;
    top: 0.3rem;
  }
}

// banner
.banner {
  width: 100%;
  padding: 0 0.266667rem;
  background-color: #ffdb47;
  img {
    width: 100%;
    border-radius: 0.2rem;
  }
}

// ad1
.ad1 {
  width: 100%;
  a {
    img {
      width: 100%;
    }
  }
}
// ad2
.ad2 {
  width: 100%;
  display: flex;
  a {
    display: block;
    flex: 1;
    img {
      width: 100%;
    }
  }
}

// nav
.nav {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.266667rem;
  a {
    flex: 20%;
    text-align: center;
    font-size: 0.293333rem;
    .nav_icon {
      width: 0.933333rem;
      height: 0.933333rem;
      margin: 0.133333rem auto;
      img {
        display: block;
        width: 100%;
      }
    }
  }
}

// new
.new {
  display: flex;
  margin-bottom: 0.266667rem;
  a {
    flex: 1;
    &:nth-child(1) {
      flex: 2;
    }
    &:nth-child(2) {
      border: 0.013333rem solid #fff;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

// miaosha
.miaosha {
  // 宽度给死
  width: 9.36rem;
  // 高度先给 测试用 后面会删掉
  // height: 7.066667rem;
  background-color: #fff;
  // 居中对齐
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.133333rem 0.133333rem 0 0;
  .items {
    flex: 50%;
    border-bottom: 0.013333rem solid #ccc;
    border-right: 0.013333rem solid #ccc;
    &:nth-child(2n) {
      border-right: 0;
    }
    .tit {
      position: relative;
      font-size: 0.373333rem;
      color: #333;
      font-weight: 700;
      padding: 0.24rem 0.106667rem 0 0.32rem;
      .sk {
        position: absolute;
        left: 2.133333rem;
        top: 0.226667rem;
        span {
          font-size: 0.266667rem;
          &:nth-child(odd) {
            padding: 0 0.066667rem;
            background-color: #ffcc00;
            border-radius: 0.066667rem;
          }
        }
      }
    }
    .desc {
      font-size: 0.32rem;
      margin: 0.053333rem 0 0 0.32rem;
    }
  }
  ul {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      img {
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        margin: auto;
      }
      p {
        font-size: 0.346667rem;
        color: #f50;
      }
    }
  }
}

// rec
.rec {
  width: 9.36rem;
  background-color: #fff;
  margin: 0 auto 0.266667rem;
  // 测试高度  后期删除
  // height: 2.666667rem;
  border-radius: 0 0 0.133333rem 0.133333rem;
  display: flex;
  cursor: pointer;
  .rec_l {
    width: 2.266667rem;
    height: 2.266667rem;
    padding-left: 0.2rem;
    h3 {
      font-size: 0.48rem;
      padding-top: 0.693333rem;
    }
    p {
      font-size: 0.32rem;
    }
  }
  .links {
    flex: 1;
    display: flex;
    a {
      flex: 1;
      text-align: center;
      img {
        display: block;
        width: 1.6rem;
        height: 1.6rem;
        margin: 0.106667rem auto;
      }
      p {
        font-size: 0.293333rem;
      }
    }
  }
}

// rec_list
.rec_list {
  width: 9.36rem;
  margin: 0 auto 0.266667rem;
  // 测试颜色 后期删除
  // background-color: #fff;
  //测试高度 后期删除
  // height: 5.333333rem;
  .rec_hd {
    font-size: 0.466667rem;
    font-weight: 700;
  }
  ul {
    display: flex;
    li {
      flex: 1;
      width: 3.013333rem;
      height: 3.546667rem;
      background-color: #fff;
      border-radius: 0.2rem;
      // 第二个li给一个左右外边距
      &:nth-child(2) {
        margin: 0 0.106667rem;
      }
      a {
        display: block;
        width: 3.013333rem;
        height: 3.546667rem;
        .rec_bd {
          position: relative;
          // 子绝父相  不给宽高会错乱
          width: 3.013333rem;
          height: 3.546667rem;
          // rec_pic
          .rec_pic {
            width: 2rem;
            height: 2rem;
            margin: auto;
            img {
              display: block;
              width: 100%;
            }
          }
          // rec_bg
          .rec_bg {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 3.013333rem;
            height: 1.24rem;
            img {
              display: block;
              width: 100%;
            }
          }
          // span
          span {
            position: absolute;
            top: 2.226667rem;
            left: 50%;
            width: 1.333333rem;
            height: 0.453333rem;
            line-height: 0.453333rem;
            transform: translateX(-50%);
            padding: 0 0.066667rem;
            border: 0.013333rem solid #d9a87a;
            border-radius: 0.226667rem;
            font-size: 0.293333rem;
            text-align: center;
            color: #d9a87a;
            background-color: #fff;
          }

          .s_tit {
            position: absolute;
            bottom: 0.2rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.266667rem;
            color: #fff;
          }
        }
      }
    }
  }
}

// cai_tit
.cai_tit {
  img {
    width: 100%;
  }
}

// like {
.like {
  width: 9.36rem;
  margin: 0.266667rem auto 0.266667rem;
  // height: 6.666667rem;
  ul {
    width: 9.36rem;
    display: flex;
    // 一行只能放两个 超出换行
    flex-wrap: wrap;
    // 主轴元素两个li 两边两个元素贴边，剩余的元素平分剩余空间
    justify-content: space-between;
    li {
      // 每个li的宽高给死
      width: 4.56rem;
      // height: 7.226667rem;
      background-color: #fff;
      border-radius: 0.2rem;
      margin-bottom: 0.2rem;
      cursor: pointer;
      .pic {
        width: 4.56rem;
        height: 4.56rem;
        img {
          display: block;
          width: 100%;
        }
      }
      .txt {
        padding: 0.24rem 0.16rem 0;
        h3 {
          // h3的高度给死
          height: 1.1rem;
          // 多行文本2行隐藏显示
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 0.346667rem;
          color: #333;
        }
        .tag {
          height: 0.32rem;
          line-height: 0.32rem;
          margin: 0.146667rem 0 0.32rem;
          img {
            width: 0.64rem;
            height: 0.32rem;
            vertical-align: top;
          }
          span {
            font-size: 0.24rem;
            border: 0.013333rem solid #ffbb00;
            border-radius: 0.066667rem;
            background: #fefbee;
            padding: 0 0.066667rem;
            vertical-align: top;
          }
        }
        p {
          color: #ff4422;
          font-weight: bold;
          font-size: 0.24rem;
          margin-bottom: 0.106667rem;
        }
      }
    }
  }
}

// go_login
.go_login {
  position: fixed;
  width: 10rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.233333rem;
  cursor: pointer;
  img {
    display: block;
    width: 100%;
  }
}

// snlogo
.snlogo {
  width: 100%;
  margin-bottom: 1.333333rem;
  img {
    display: block;
    width: 100%;
  }
}

// footer
.footer {
  display: flex;
  position: fixed;
  width: 10rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  background-color: #fff;
  a {
    flex: 1;
    text-align: center;
    .ico {
      width: 0.64rem;
      height: 0.64rem;
      margin: 0.106667rem auto;
      img {
        display: block;
        width: 100%;
      }
    }
    p {
      font-size: 0.266667rem;
    }
    .cur {
      font-weight: 700;
    }
  }
}
